<!-- @format -->

<template>
    <div class="container">
        <div>
            <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
                <el-radio-button :value="false">expand</el-radio-button>
                <el-radio-button :value="true">collapse</el-radio-button>
            </el-radio-group>
            <el-menu
                default-active="0"
                class="el-menu-vertical-demo"
                :collapse="isCollapse"
                @open="handleOpen"
                @close="handleClose"
            >
                <!-- <el-sub-menu index="1">
                    <template #title>
                        <el-icon><location /></el-icon>
                        <span>Navigator One</span>
                    </template>
                    <el-menu-item-group>
                        <template #title><span>Group One</span></template>
                        <el-menu-item index="1-1">item one</el-menu-item>
                        <el-menu-item index="1-2">item two</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="Group Two">
                        <el-menu-item index="1-3">item three</el-menu-item>
                    </el-menu-item-group>
                    <el-sub-menu index="1-4">
                        <template #title><span>item four</span></template>
                        <el-menu-item index="1-4-1">item one</el-menu-item>
                    </el-sub-menu>
                </el-sub-menu> -->
                <!-- <el-menu-item index="2">
                    <el-icon><icon-menu /></el-icon>
                    <template #title>Navigator Two</template>
                </el-menu-item> -->

                <el-menu-item v-for="(item, i) in props.category" :index="i">
                    <el-icon><icon-menu /></el-icon>
                    <template #title
                        ><RouterLink :to="`${props.baseUrl}/${item.path}`">{{ item.title }}</RouterLink></template
                    >
                </el-menu-item>
            </el-menu>
        </div>
        <div class="content">
            <RouterView />
        </div>
    </div>
</template>
<script setup lang="ts">
import {Menu as IconMenu} from '@element-plus/icons-vue';

interface CategoryItem {
    title: string;
    path: string;
}

const props = withDefaults(defineProps<{baseUrl?: string; category: CategoryItem[]}>(), {
    baseUrl: '',
    category: () => [],
});

const isCollapse = ref(false);
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
};
</script>
<style scoped lang="scss">
.container {
    width: 100%;
    padding: 10px;
    display: flex;
    gap: 16px;
    box-sizing: border-box;
}

.content {
    padding: 18px;
    flex: 1;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);
    box-shadow:
        inset 5px 5px 10px #c1c1c1,
        inset -5px -5px 10px #ffffff;
}
</style>
